<script setup lang="ts">
  import { PropType, ref, watch } from 'vue'
  import {
    DataConnectTableFieldType,
    DataConnectTableType,
    DataConnectTable,
  } from '../../../hooks/types'
  import GoodSelectModal from './good-select-modal.vue'
  import CustomerSelectModal from './customer-select-modal.vue'
  import snCodeSelectModal from './sn-code-select-modal.vue'

  defineOptions({
    name: 'OrderCustomFormDataConnect',
  })

  const props = defineProps({
    // 数据源
    dataType: {
      type: String as PropType<DataConnectTableType>,
      default: () => '',
    },

    // 选择数据时显示的字段
    fieldList: {
      type: Array as PropType<Array<DataConnectTableFieldType>>,
      default: () => [],
    },

    // 选择方式：1-多选，2-单选
    selectMode: {
      type: Number as PropType<1 | 2>,
      default: () => 1,
    },

    // 选择数据后显示在表单的字段
    fieldShowListAfterSelect: {
      type: Array as PropType<Array<{ label: string; value: DataConnectTableFieldType }>>,
      default: () => [],
    },

    // 是否禁用
    disabled: {
      type: Boolean,
      default: () => false,
    },

    // 默认选中的数据
    selectedRowIds: {
      type: Array as PropType<Array<string>>,
      default: () => [],
    },
  })

  const emits = defineEmits<{
    (e: 'change', value: DataConnectTable): void
    (e: 'select-data-click'): void
  }>()

  // 产品选择弹窗显示状态
  const goodSelectModalVisible = ref(false)

  // 客户选择弹窗显示状态
  const customerSelectModalVisible = ref(false)

  // 条码选择弹窗显示状态
  const snCodeSelectModalVisible = ref(false)

  // 选择的列表
  const selectList = ref<DataConnectTable>([])

  // 产品选择弹窗组件实例
  const goodSelectModalInstance = ref<InstanceType<typeof GoodSelectModal> | null>(null)

  // 客户选择弹窗组件实例
  const customerSelectModalInstance = ref<InstanceType<typeof CustomerSelectModal> | null>(null)

  // 条码选择弹窗组件实例
  const snCodeSelectModalInstance = ref<InstanceType<typeof snCodeSelectModal> | null>(null)

  /**
   * 选择数据点击事件
   */
  const handleSelectDataClick = () => {
    if (props.disabled) {
      return
    }

    emits('select-data-click')

    if (props.dataType === 'good') {
      goodSelectModalVisible.value = true
      if (goodSelectModalInstance.value) {
        goodSelectModalInstance.value.setSelectedRow(props.selectedRowIds)
      }
    }

    if (props.dataType === 'customer') {
      customerSelectModalVisible.value = true
      if (customerSelectModalInstance.value) {
        customerSelectModalInstance.value.setSelectedRow(props.selectedRowIds)
      }
    }

    if (props.dataType === 'snCode') {
      snCodeSelectModalVisible.value = true
      if (snCodeSelectModalInstance.value) {
        snCodeSelectModalInstance.value.setSelectedRow(props.selectedRowIds)
      }
    }
  }

  /**
   * 列表选择表单更新事件
   * @param {DataConnectTable} list - 选择的列表
   */
  const handleListSelectModalUpdate = (list: DataConnectTable) => {
    selectList.value = list
    emits('change', list)
  }

  watch(
    () => props.dataType,
    () => {
      selectList.value.length = 0
    },
  )
</script>

<template>
  <div class="order-custom-form-data-connect">
    <div v-show="!props.disabled" class="show-data-box" @click="handleSelectDataClick"
      >选择数据</div
    >

    <div v-if="props.fieldShowListAfterSelect.length > 0" class="field-show-list">
      <div
        v-for="(field, fieldIndex) in props.fieldShowListAfterSelect"
        :key="fieldIndex"
        class="field"
      >
        {{ field.label }} - {{ selectList[0] ? selectList[0][field.value] : '' }}
      </div>
    </div>

    <good-select-modal
      ref="goodSelectModalInstance"
      v-model="goodSelectModalVisible"
      :select-mode="props.selectMode"
      :show-field-list="props.fieldList"
      @update="handleListSelectModalUpdate"
    />
    <customer-select-modal
      ref="customerSelectModalInstance"
      v-model="customerSelectModalVisible"
      :select-mode="props.selectMode"
      :show-field-list="props.fieldList"
      @update="handleListSelectModalUpdate"
    />
    <sn-code-select-modal
      ref="snCodeSelectModalInstance"
      v-model="snCodeSelectModalVisible"
      :select-mode="props.selectMode"
      :show-field-list="props.fieldList"
      @update="handleListSelectModalUpdate"
    />
  </div>
</template>

<style scoped lang="scss">
  .order-custom-form-data-connect {
    width: 100%;

    .show-data-box {
      height: 28px;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      width: 100%;
      border: 1px solid #dcdfe6;
      border-radius: 2px;

      &:hover {
        color: #007cff;
        border-color: #007cff;
        transition: all 0.3s ease;
      }
    }

    .field-show-list {
      display: flex;
      flex-direction: column;
      padding: 8px;
      box-sizing: border-box;

      .field {
        width: 100%;
        height: 28px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        line-height: 28px;
      }
    }
  }
</style>
